<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body style="background: black;">
		<canvas id="canvas" style="display: block; border:1px solid red ; margin: 0 auto;"></canvas>
 <input type="range" id="scale-range" min="0.5" max="3.0" step="0.01" value="1.0" style="display:block;margin:20px auto;width:800px"/>
	</body> 
	<script>
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		var slider =document.getElementById("scale-range");
		canvas.width =1200;
		canvas.height=760;
		
		var scale = slider.value
		var image = new Image();
		image.src="../img/1920.jpg";
		image.onload =function(){
		//context.drawImage(image,0,0,canvas.width,canvas.height);//全屏
		drawImageByScale(scale);
		
//                slider.onchange = function(){
//                    scale = slider.value
//                    drawImage( image , scale )
//                }

                slider.onmousemove = function(){
                    scale = slider.value;
                    drawImageByScale( scale )
                }
            }
	
		function drawImageByScale(scale){//图像缩放函数
		  var imageWidth = canvas.width*scale;
            var imageHeight = canvas.height*scale;
            
		
		/*	var sx = (canvas.width-imageWidth)/2;
			var sy = (canvas.height-imageHeight)/2;
			context.drawImage(image,sx,sy,imageWidth-2*sx,imageHeight-2*sy,0,0,canvas.width,canvas.height);
			*/
	
			
		   x = canvas.width /2 - imageWidth / 2
            y = canvas.height / 2 - imageHeight / 2

            context.clearRect( 0 , 0 , canvas.width , canvas.height );
            context.drawImage( image , x , y , imageWidth , imageHeight );
        }
		
	</script>
</html>
